<template>
  <div style="margin: 5px;background-color: #E4E7ED;">
    <el-dialog
      v-if="params.dialogVisible"
      :close-on-click-modal="params.closeModal"
      :close-on-press-escape="params.closeEsc"
      :closeOnClickModal="false"
      :modal="params.modal"
      :show-close="params.showClose"
      :title="params.title"
      :visible.sync="params.dialogVisible"
      :destroy-on-close="true"
      @close="closeCallBack"
      width="30%"
    >
      <el-form
        :label-position="params.labelPosition"
        :model="params.data"
        label-width="80px"
      >
        <el-form-item label="上级模块：">
          <el-input disabled v-model="params.data.modulePName"></el-input>
        </el-form-item>
        <el-form-item label="模块名称">
          <el-input
            :readonly="params.readonly"
            v-model="params.data.moduleName"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块类型">
          <el-radio
            :disabled="params.readonly && params.data.moduleGrade !== '1'"
            border
            label="1"
            v-model="params.data.moduleGrade"
            >目录
          </el-radio>
          <el-radio
            :disabled="params.readonly && params.data.moduleGrade !== '2'"
            border
            label="2"
            v-model="params.data.moduleGrade"
            >菜单
          </el-radio>
        </el-form-item>
        <el-form-item label="模块地址" v-if="params.data.moduleGrade === '2'">
          <el-input
            :readonly="params.readonly"
            v-model="params.data.moduleUrl"
          ></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer" v-if="params.showBtn">
        <el-button
          :style="item.style"
          :type="item.type"
          @click="item.click(params)"
          v-bind:key="item.name"
          v-for="item in params.btn"
          >{{ item.name }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import _ from "lodash";
import * as service from "@/api/module";
export default {
  name: "my-dialog-v1",
  data: function() {
    return {
      params: {
        labelPosition: "top",
        title: "", //标题
        readonly: false,
        initialForm: {},
        data: {
          moduleId: "", //id
          moduleName: "", //模块名称
          moduleUrl: "", //模块地址
          moduleGrade: "1", //1目录 2 菜单
          moduleAuthority: "",
          modulePid: "",
          modulePName: "无"
        }, //内容
        modal: true, //遮罩层
        closeModal: true, //点击遮罩层关闭弹窗
        showClose: true, //显示关闭按钮
        closeEsc: true, //是否可以通过esc关闭
        dialogVisible: false,
        close: function(param) {
          param.dialogVisible = false;
        },
        submit: function(param) {
          param.dialogVisible = false;
        },
        showBtn: true,
        btn: []
      }
    };
  },
  props: {
    RHDialog: Object
  },
  methods: {
    show() {
      this.params.dialogVisible = true;
      //保存表单的初始值
      this.params.initialForm = _.clone(this.params.data);
    },
    close() {
      this.params.dialogVisible = false;
    },
    //重置表单
    formReset() {
      this.params.data = _.clone(this.params.initialForm);
    },
    //表单赋值
    formInitialize(param) {
      /* let key = this.keys(this.params.data);
                 if (key[1].length > 0) {
                   key[1].forEach((item, index) => {
                     this.params.data[item] =
                       param[_.split(item, ".")[0]][_.split(item, ".")[1]];
                   });
                 }
                 param = _.pick(param, key[0]);
                 param = _.omitBy(param, _.isNull);*/
      this.params.data = _.defaultsDeep(param, this.params.data);
    },
    //关闭弹出框回调
    closeCallBack() {
      this.formReset();
    },
    keys(param) {
      const key = _.keys(this.params.data);
      let temp = [];
      let one = [];
      let two = [];
      key.forEach((item, index) => {
        if (_.split(item, ".").length === 1) {
          one.push(item);
        } else {
          two.push(item);
        }
      });
      temp.push(one);
      temp.push(two);
      return temp;
    },
    getInfo(id) {
      if (id != null && id !== "") {
        const _this = this;
        service.get({ moduleId: id }).then(function(data) {
          _this.formInitialize(data.entity);
          _this.params.data.modulePName = data.entity.pmodule.moduleName;
        });
      }
    }
  },
  created() {
    const params = this.RHDialog || {};
    this.params = Object.assign(this.params, params);
  }
};
</script>

<style scoped>
.btn {
  margin: 5px;
}
</style>
